<template>
  <div class="GameBody">
    <!-- 积分组件 -->
    <Fraction></Fraction>
    <!-- 游戏组件 -->
    <Snake></Snake>
    <!-- 游戏指南 -->
    <GameSettings></GameSettings>

    <div class="SnakeKey">
      <span>
        <i class="el-icon-caret-top" @click="Top" :style="{ color: color.Top }"></i>
        <span class="SnakeKey_span">
          <i class="el-icon-caret-left" @click="Left" :style="{ color: color.Left }"></i>
          <i class="el-icon-caret-right" @click="Right" :style="{ color: color.Right }"></i>
        </span>
        <i class="el-icon-caret-bottom" @click="Down" :style="{ color: color.Down }"></i>
      </span>
      <span>
        <i class="Size" :class="color.class" @click="Suspend"></i>
      </span>
    </div>
    <div class="Set" :style="{ height: HelpData.Height + 'px' }" @click="GameSet"></div>
  </div>
</template>

<script setup lang="ts">
import { reactive, } from "@vue/reactivity"
import Snake from "./Snake.vue";
import Fraction from "./Fraction.vue";
import { init, ClickMove } from '../hoos/UseField'
import { HelpData } from '../hoos/UseHelp'
import GameSettings from './GameSettings.vue'
let color = reactive({
  Top: '',
  Left: '',
  Down: '',
  Right: '',
  class: 'el-icon-video-pause'
  // 
})
init();
// 蛇移动方向
function Top() {
  ClickMove('ArrowUp');
  color.Top = 'red'
  setTimeout(() => { color.Top = 'black' }, 100)
  color.class == 'el-icon-video-play' ? color.class = 'el-icon-video-pause' : 1
}
function Left() {
  ClickMove('ArrowLeft');
  color.Left = 'red'
  setTimeout(() => { color.Left = 'black' }, 100)
  color.class == 'el-icon-video-play' ? color.class = 'el-icon-video-pause' : 1
}
function Right() {
  ClickMove('ArrowRight');
  color.Right = 'red'
  setTimeout(() => { color.Right = 'black' }, 100)
  color.class == 'el-icon-video-play' ? color.class = 'el-icon-video-pause' : 1
}
function Down() {
  ClickMove('ArrowDown');
  color.Down = 'red'
  setTimeout(() => { color.Down = 'black' }, 100)
  color.class == 'el-icon-video-play' ? color.class = 'el-icon-video-pause' : 1
}
function Suspend() {
  ClickMove('');
  color.class == 'el-icon-video-pause' ? color.class = 'el-icon-video-play' : color.class = 'el-icon-video-pause'
}
function GameSet() {
  HelpData.IsShow == true ? HelpData.IsShow = false : HelpData.IsShow = true
}
</script>

<style scoped>
* {
  padding: 0px;
  margin: 0px;
  /* 改变盒子模型的计算方式 */
  box-sizing: border-box;
}
.GameBody {
  width: 550px;
  height: 600px;
  margin: 100px auto;
  position: relative;
  border: 5px solid #458c06;
  background-color: #76ba25;
  border-radius: 30px;
  box-shadow: 10px 10px 5px #888888;
  /* 开启弹性布局 */
  display: flex;
  /* 设置主轴的方向为y轴 */
  flex-flow: column;
  /* 设置主轴轴上的子元素排序 */
  justify-content: space-around;
  /* 设置侧轴上的子元素的排列方式 */
  align-items: center;
}
.SnakeKey {
  position: relative;
  width: 520px;
  height: 80px;
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.SnakeKey {
  font-size: 35px;
}
.SnakeKey span:nth-child(1) {
  margin-left: 50px;
}
.SnakeKey span:nth-child(2) {
  margin-right: 30px;
}
.SnakeKey span .Size {
  font-size: 70px;
}
.SnakeKey .SnakeKey_span {
  width: 110px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: -37px;
}
.Set {
  position: absolute;
  top: 80px;
  margin-right: -8px;
  width: 8px;
  height: 30px;
  background-color: red;
  /* margin: 150px 0%; */
  z-index: 11;
  box-shadow: 10px 7px 4px #888888;
  border-radius: 20%;
  align-self: flex-end;

  -webkit-transition: all 0.1s ease-out;
  -moz-transition: all 0.1s ease-out;
  -ms-transition: all 0.1s ease-out;
  -o-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
}
</style>